<template>
  <contents :heightInclude="['navBar']" class="cardDetails_page">
    <view
      class="cars-bg"
      :style="{
        background: `url(${imgObj.backgroundPicUrl}) no-repeat scroll center center;background-size: 100% 100%`,
      }"
    >
      <view class="bank-name">{{ cardInfo.bankName }}</view>
      <view class="bank-type">储蓄卡</view>
      <view class="cars-num">{{ cardInfo.acctNo }}</view>
    </view>
    <view class="btn-box">
      <view
        class="btn-item"
        @click="navSwitch('/pages/wallet/bindChange')"
      >
        <image class="btn-img" src="http://img.druglots.cn/bind.png"></image>
        <view class="btn-name">换绑</view>
      </view>
    </view>
  </contents>
</template>
<script>
import { getMyWalletInfo, getBankType } from '@/api/http/wallet'
export default {
  data() {
    return {
      cardInfo: {},
      imgObj: {}
    };
  },
  onLoad() {
    this.getData();
  },
  methods: {
    async getData() {
      await getMyWalletInfo().then((res) => {
        if (res.code === 200) {
          this.cardInfo = res.data;
        } else {
          uni.showToast({
            icon: "none",
            title: res.message,
          });
        }
      });
      getBankType({ acctNo: this.cardInfo.acctNo }).then(res => {
        if (res.code === 200) {
          this.imgObj = res.data
        }
      })
    },
    navSwitch(url) {
      uni.navigateTo({
        url,
      });
    },
  },
};
</script>
<style lang="scss" scoped>
.cardDetails_page {
  .cars-bg {
    width: 100%;
    height: 394rpx;
    overflow: hidden;
    background-size: contain !important;

    .bank-name {
      margin: 50rpx 0 0 163rpx;
      font-size: 32rpx;
      font-family: PingFang SC;
      font-weight: bold;
      color: #ffffff;
    }

    .bank-type {
      margin: 0 0 0 163rpx;
      font-size: 24rpx;
      font-family: PingFang SC;
      font-weight: bold;
      color: #ffffff;
    }

    .cars-num {
      margin: 50rpx 0 0 163rpx;
      font-size: 44rpx;
      font-family: PingFang SC;
      font-weight: bold;
      color: #ffffff;
    }
  }

  .btn-box {
    display: flex;
    padding: 30rpx;
    box-sizing: border-box;

    .btn-item {
      width: 25%;
      display: flex;
      flex-direction: column;
      justify-content: space-around;
      align-items: center;

      .btn-img {
        width: 100rpx;
        height: 100rpx;
      }

      .btn-name {
        font-size: 24rpx;
        font-family: PingFang SC;
        font-weight: 500;
        color: #000000;
        text-align: center;
      }
    }
  }
}
</style>
